<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer"><div id="slider" /></div>
    <div class="tool-box-left-top">
      <p><button :class="{ active: !!synchronizer }" @click="handleClick('synchronizer')">同步</button></p>
      <p><button :class="{ active: isRepeating }" @click="handleClick('isRepeating')">重复</button></p>
      <p><button :class="{ active: videoOverlay }" @click="handleClick('videoOverlay')">播放器</button></p>
    </div>
    <viewerSettingSidebar :viewerSource="viewerSource" style="top:160px" />
    <MousePosition show :viewerSource="viewerSource" />
    <GlobeRotater showTime startOnMount :viewerSource="viewerSource" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { RainEffect, SnowEffect, FogEffect } from '@g3x/g3v/effects';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers:[{
    dom: "cesium-viewer",
    name: "viewer1",
    title: "viewer#01",
    viewer:{
      imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
      imageryProvider: null,
      terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      terrainProvider: null,
      shadows: false,
    },
    layers:[
      { type: 'arcgisStreetMap', options: { name: 'arcgisStreetMap', brightness: 1, show: true } },
      // { type: 'tdtIboMap', options: { brightness: 1, show: true } },
      // { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
      // { type: 'darkMask', options: { brightness: 1, alpha: 0.9 } },
      { type: 'graticule', options: { brightness: 1, show: true } }
    ],
    globe: {
      depthTestAgainstTerrain: false,
      enableLighting: true //启用以太阳为光源的地球
    },
    navigation: {
      // defaultResetView: G3V.defaultViews.global.china.rectangle ,
      defaultResetView: null //flyHome
    },
    hideLayers: false,
  // },{
  //   dom: "cesium-viewer#2",
  //   name: "viewer2",
  //   title: "viewer 2",
  //   options:{
  //     imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
  //     imageryProvider: null,
  //     terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
  //     terrainProvider: null,
  //     shadows: false,
  //   }
  }],
};

export default defineComponent({
  name: 'my-video', // 视频
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  setup() {
    return {eventHandler:null};
  },
  props: {},
  data() {
    return {
      playing: true,
      g3v: null,
      drawingMode: '',
      // timeStart: '2021-05-03T00:00:00+08:00',
      // timeEnd: '2021-05-09T00:00:00+08:00',
      sliderOption: { max: 3600 * 2, step: 1 },
      synchronizer: null,
      isRepeating: true,
      videoOverlay: true
    };
  },
  computed: {
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    g3vViewer() {
      return this.g3v && this.g3v.g3vViewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    },
    clockOptions() {
      return { multiplier: 1 };
    }
  },
  watch: {
    drawingMode(val) {
      const { viewer } = this;
      if (!viewer) return;
    }
  },
  mounted() {
    console.log("imagerySpli mounted!")
    this.initViewer();
  },
  beforeUnmount() {
    const { eventHandler } = this;
    this.eventHandler = eventHandler && eventHandler.destroy();
  },
  unmounted() {
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions,()=>{
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {},
    initEffects() {
      let vm = this;
      const viewer = this.viewer;
      viewer.scene.imagerySplitPosition = 0.5;
      // viewer.scene.imagerySplitPosition = 0.55;
      var earthAtNight = this.g3vViewer.layers.get('arcgisStreetMap');
      earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.

      // Sync the position of the slider with the split position
      var slider = document.getElementById('slider');
      viewer.scene.imagerySplitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;

      var handler = new Cesium.ScreenSpaceEventHandler(slider);

      var moveActive = false;

      function move(movement) {
        if (!moveActive) {
          return;
        }

        var relativeOffset = movement.endPosition.x;
        var splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
        slider.style.left = 100.0 * splitPosition + '%';
        viewer.scene.imagerySplitPosition = splitPosition;
      }

      handler.setInputAction(function() {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      handler.setInputAction(function() {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.PINCH_START);

      handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

      handler.setInputAction(function() {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
      handler.setInputAction(function() {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.PINCH_END);

      this.eventHandler = handler;

      // const offset = new Cesium.HeadingPitchRange(0.5, -0.5, 50.0);
      // viewer.flyTo(pointCloud, { offset });
    },
    handleClick(value) {}
  }
});
</script>

<style lang="less">
.tool-box-left-top {
  display: flex;

  button {
    min-width: 5em;
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    transition: all 500ms;

    &:hover {
      opacity: 0.75;
    }

    &.active {
      background-color: rgba(0, 20, 200, 0.75);
    }
  }
}

#slider {
  position: absolute;
  left: 50%;
  top: 0px;
  background-color: #ff0000;
  width: 5px;
  height: 100%;
  z-index: 9999;
}

#slider:hover {
  cursor: ew-resize;
}
</style>
